<template>
  <view class="group-detail-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
        <text class="header-title">集团档案详情</text>
      </view>
    </view>

    <!-- 集团基本信息卡片 -->
    <view class="info-card animate-card premium-card">
      <view class="card-decorator"></view>
      <view class="group-header">
        <view class="group-avatar square-avatar" :class="getIndustryClass(groupInfo.industry)">
          <view class="avatar-text">{{ getFirstChar(groupInfo.name) }}</view>
        </view>
        <view class="group-info">
          <view class="group-name">{{ groupInfo.name }}</view>
          <view class="group-meta">
            <text class="group-id">编码: {{ groupInfo.code }}</text>
            <text class="group-district">{{ groupInfo.district }}</text>
            <view
              class="group-industry"
              :class="getBadgeClass(groupInfo.industry)"
            >{{ groupInfo.industry }}</view>
          </view>
        </view>
        <view
          class="network-share-circle square-share"
          :class="getShareClass(groupInfo.networkShare)"
        >
          <text class="share-number">{{ groupInfo.networkShare }}%</text>
          <text class="share-label">本网份额</text>
        </view>
      </view>

      <!-- 基础数据 -->
      <view class="group-data">
        <view class="data-item pulse" :class="{'highlight': groupInfo.networkShare < 40}">
          <text class="data-value">{{ groupInfo.totalMembers }}</text>
          <text class="data-label">单位人数</text>
        </view>
        <view class="data-divider"></view>
        <view class="data-item pulse" :class="{'highlight': groupInfo.networkShare < 40}">
          <text class="data-value">{{ groupInfo.networkMembers }}</text>
          <text class="data-label">本网成员</text>
        </view>
        <view class="data-divider"></view>
        <view class="data-item">
          <text class="data-value">{{ groupInfo.members5G }}</text>
          <text class="data-label">5G成员</text>
        </view>
        <view class="data-divider"></view>
        <view class="data-item">
          <text class="data-value">{{ groupInfo.broadbandMembers }}</text>
          <text class="data-label">宽带成员</text>
        </view>
      </view>

      <!-- 完整基础信息 -->
      <view class="full-info-section">
        <view class="section-title-bar">
          <text class="section-title-text">基础信息</text>
          <view class="section-action">
            <view class="edit-icon-wrapper" @click="editBasicInfo">
              <u-icon name="edit-pen" size="22" color="#0078ff"></u-icon>
            </view>
          </view>
        </view>

        <view class="info-grid">
          <view class="info-grid-item">
            <text class="info-grid-label">行业链属性</text>
            <text class="info-grid-value">{{ groupInfo.industryChain || '暂无' }}</text>
          </view>

          <view class="info-grid-item">
            <text class="info-grid-label">县区</text>
            <text class="info-grid-value">{{ groupInfo.district || '暂无' }}</text>
          </view>

          <view class="info-grid-item">
            <text class="info-grid-label">5G终端成员数</text>
            <text class="info-grid-value">{{ groupInfo.terminal5GMembers }}</text>
          </view>

          <view class="info-grid-item">
            <text class="info-grid-label">低质态集团</text>
            <view class="info-grid-value">
              <u-tag
                :text="groupInfo.isLowQuality == 1 ? '是' : '否'"
                :type="groupInfo.isLowQuality == 1 ? 'warning' : 'success'"
                size="mini"
              />
            </view>
          </view>

          <view class="info-grid-item wide-grid-item">
            <text class="info-grid-label">低质态方案递送</text>
            <view class="info-grid-value">
              <u-tag
                v-if="groupInfo.isLowQuality == 1"
                :text="groupInfo.lowQualityPlanDelivered == 1 ? '已递送' : '未递送'"
                :type="groupInfo.lowQualityPlanDelivered == 1 ? 'success' : 'error'"
                size="mini"
              />
              <text v-else>不适用</text>
            </view>
          </view>

          <view class="info-grid-item wide-grid-item">
            <text class="info-grid-label">最近方案递送</text>
            <text class="info-grid-value">{{ getLatestDeliveryTime() || '暂无记录' }}</text>
          </view>
        </view>
      </view>

      <!-- 客户经理信息 -->
      <view class="manager-info">
        <view class="manager-avatar">
          <u-icon name="account" size="24" color="#ffffff"></u-icon>
        </view>
        <view class="manager-details">
          <text class="manager-name">{{ groupInfo.manager }}</text>
          <view class="manager-contact">
            <u-icon name="phone" size="14" color="#909399"></u-icon>
            <text class="manager-phone">{{ groupInfo.managerPhone }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 标签切换 -->
    <view class="tab-container" v-if="isLoaded">
      <u-tabs
        ref="uTabs"
        :list="tabList"
        :current="Number(currentTab)"
        @change="onTabChange"
        activeStyle="color: #007aff;font-weight: bold"
        inactiveStyle="color: #606266"
        lineColor="#007aff"
        :lineWidth="20"
        :scrollable="false"
      ></u-tabs>
    </view>

    <!-- 标签页内容 -->
    <swiper class="swiper-container" :current="currentTab" @change="onSwiperChange" v-if="isLoaded">
      <!-- 跟进记录标签页 -->
      <swiper-item>
        <scroll-view scroll-y class="tab-scroll-view">
          <view class="tab-content">
            <view class="section-header">
              <view class="section-title">
                <u-icon name="calendar" size="20" color="#007aff"></u-icon>
                <text>成员跟进记录</text>
              </view>
              <view class="section-action">
                <u-button
                  text="成员跟进"
                  size="mini"
                  type="primary"
                  icon="plus"
                  @click="addFollowRecord"
                ></u-button>
              </view>
            </view>

            <view class="timeline" v-if="followRecords.length > 0">
              <view class="timeline-item" v-for="(record, index) in followRecords" :key="index">
                <view class="timeline-dot"></view>
                <view class="timeline-content">
                  <view class="timeline-header">
                    <text class="timeline-date">{{ record.deliveryTime }}</text>
                    <u-tag text="已递送" type="success" size="mini" v-if="record.isDelivered"></u-tag>
                  </view>
                  <view class="timeline-body">{{ record.policy }}</view>
                </view>
              </view>
            </view>

            <view class="empty-content" v-else>
              <u-empty mode="list" text="暂无跟进记录" marginTop="40"></u-empty>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 信息化拓展标签页 -->
      <swiper-item>
        <scroll-view scroll-y class="tab-scroll-view">
          <view class="tab-content">
            <view class="section-header">
              <view class="section-title">
                <u-icon name="server-fill" size="20" color="#007aff"></u-icon>
                <text>信息化拓展情况</text>
              </view>
              <view class="section-action">
                <u-button
                  text="新增拓展"
                  size="mini"
                  type="primary"
                  icon="plus"
                  @click="addExpansionItem"
                ></u-button>
              </view>
            </view>

            <!-- 五大产品类型统计卡片 -->
            <view class="product-category-stats" v-if="expansionProducts.length > 0">
              <view class="product-grid">
                <!-- 第一行：3个产品类型 -->
                <view class="product-card" @click="filterProductsByType('专线')">
                  <view class="product-icon bg-blue">
                    <u-icon name="grid" color="#ffffff" size="24"></u-icon>
                  </view>
                  <text class="product-name">专线</text>
                  <text class="product-count">{{ getProductCountByType('专线') }}</text>
                </view>

                <view class="product-card" @click="filterProductsByType('移动云')">
                  <view class="product-icon bg-green">
                    <u-icon name="cloud-upload" color="#ffffff" size="24"></u-icon>
                  </view>
                  <text class="product-name">移动云</text>
                  <text class="product-count">{{ getProductCountByType('移动云') }}</text>
                </view>

                <view class="product-card" @click="filterProductsByType('物联网')">
                  <view class="product-icon bg-orange">
                    <u-icon name="wifi" color="#ffffff" size="24"></u-icon>
                  </view>
                  <text class="product-name">物联网</text>
                  <text class="product-count">{{ getProductCountByType('物联网') }}</text>
                </view>

                <!-- 第二行：2个产品类型 -->
                <view class="product-card" @click="filterProductsByType('短彩信')">
                  <view class="product-icon bg-purple">
                    <u-icon name="chat" color="#ffffff" size="24"></u-icon>
                  </view>
                  <text class="product-name">短彩信</text>
                  <text class="product-count">{{ getProductCountByType('短彩信') }}</text>
                </view>

                <view class="product-card" @click="filterProductsByType('其他')">
                  <view class="product-icon bg-gray">
                    <u-icon name="more-dot-fill" color="#ffffff" size="24"></u-icon>
                  </view>
                  <text class="product-name">其他</text>
                  <text class="product-count">{{ getProductCountByType('其他') }}</text>
                </view>
              </view>

              <!-- 产品筛选器 -->
              <view class="filter-section">
                <scroll-view scroll-x class="filter-scroll">
                  <view class="filter-tabs">
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === 'all' }"
                      @click="setProductFilter('all')"
                    >全部</view>
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === '专线' }"
                      @click="setProductFilter('专线')"
                    >专线</view>
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === '移动云' }"
                      @click="setProductFilter('移动云')"
                    >移动云</view>
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === '物联网' }"
                      @click="setProductFilter('物联网')"
                    >物联网</view>
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === '短彩信' }"
                      @click="setProductFilter('短彩信')"
                    >短彩信</view>
                    <view
                      class="filter-tab"
                      :class="{ active: currentFilter === '其他' }"
                      @click="setProductFilter('其他')"
                    >其他</view>
                  </view>
                </scroll-view>
              </view>
            </view>

            <!-- 产品列表 -->
            <view class="expansion-list" v-if="filteredProducts && filteredProducts.length > 0">
              <view
                class="expansion-card premium-card"
                v-for="(item, index) in filteredProducts"
                :key="index"
              >
                <view class="expansion-header">
                  <view class="expansion-type" :class="getProductClass(item.type)">{{ item.type }}</view>
                  <view class="expansion-name">{{ item.name }}</view>
                  <view
                    class="expansion-status"
                    :class="getStatusClass(item.status)"
                  >{{ item.status }}</view>
                </view>

                <view class="expansion-info">
                  <view class="info-row">
                    <view class="info-item">
                      <text class="info-label">拟拓展数量</text>
                      <text class="info-value">{{ item.count }}</text>
                    </view>
                    <view class="info-item">
                      <text class="info-label">预计签约金额</text>
                      <text class="info-value">{{ item.amount }} 元/年</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-item">
                      <text class="info-label">预计落地时间</text>
                      <text class="info-value">{{ item.expectedTime }}</text>
                    </view>
                    <view class="info-item">
                      <text class="info-label">产品主管</text>
                      <text class="info-value">{{ item.manager || '暂无' }}</text>
                    </view>
                  </view>
                </view>

                <!-- 子产品跟进记录展示区域 -->
                <view
                  class="follow-records-section"
                  v-if="item.followRecords && item.followRecords.length > 0"
                >
                  <view class="follow-records-header" @click="toggleExpand(item)">
                    <text class="follow-records-title">跟进记录 ({{ item.followRecords.length }}条)</text>
                    <u-icon
                      :name="item.expanded ? 'arrow-up' : 'arrow-down'"
                      size="16"
                      color="#909399"
                    ></u-icon>
                  </view>

                  <view class="follow-records-content" v-if="item.expanded">
                    <view class="timeline mini-timeline">
                      <view
                        class="timeline-item"
                        v-for="(record, rIndex) in item.followRecords"
                        :key="rIndex"
                      >
                        <view class="timeline-dot"></view>
                        <view class="timeline-content">
                          <view class="timeline-header">
                            <text class="timeline-date">{{ record.date }}</text>
                            <text class="timeline-person">{{ record.person }}</text>
                          </view>
                          <view class="timeline-body">{{ record.content }}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view class="expansion-actions">
                  <u-button text="添加跟进" type="primary" size="mini" plain @click="addFollowUp(item)"></u-button>
                  <u-button
                    text="查看详情"
                    type="info"
                    size="mini"
                    plain
                    @click="viewExpansionDetail(item)"
                  ></u-button>
                </view>
              </view>
            </view>

            <view class="empty-content" v-else>
              <u-empty mode="data" text="暂无信息化拓展项目" marginTop="40"></u-empty>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import {
  getIndustryAvatarClass,
  getIndustryBadgeClass,
  getNetworkShareClass,
  getProductTypeClass,
  getStatusClass
} from "@/utils/industry-utils.js";

export default {
  data() {
    return {
      groupCode: "",
      groupInfo: {},
      currentTab: 0,
      tabList: [{ name: "跟进记录" }, { name: "信息化拓展" }],
      followRecords: [],
      expansionProducts: [],
      isLoaded: false,
      isTabsInit: false,
      currentFilter: "all"
    };
  },
  computed: {
    // 计算当前筛选后的产品列表
    filteredProducts() {
      if (this.currentFilter === "all") {
        return this.expansionProducts;
      } else {
        return this.expansionProducts.filter(
          item => item.type === this.currentFilter
        );
      }
    }
  },
  onLoad(options) {
    if (options.groupCode) {
      this.groupCode = options.groupCode;
      this.getGroupDetail();
    } else {
      uni.showToast({
        title: "缺少集团编码",
        icon: "none"
      });
      setTimeout(() => {
        this.goBack();
      }, 1500);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },

    // 获取字符串的首字符，处理可能的空值和特殊字符
    getFirstChar(str) {
      if (!str || typeof str !== "string" || str.length === 0) {
        return "?";
      }
      try {
        return str.charAt(0);
      } catch (e) {
        console.error("获取首字符失败:", e);
        return "?";
      }
    },

    // 获取集团详情
    getGroupDetail() {
      uni.showLoading({
        title: "加载中..."
      });

      // 调用API获取集团详情
      this.$http
        .sendRequest("zhanke/group_detail", "POST", {
          groupCode: this.groupCode
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            const detail = res.data.data;

            // 处理API返回的数据
            this.groupInfo = {
              id: detail.id,
              name: detail.name || "未知单位",
              district: detail.district || "未知",
              industry: detail.industry || "其他",
              industryChain: detail.industryChain || "",
              code: detail.code,
              manager: detail.manager || "",
              managerPhone: detail.managerPhone || "",
              managerDepartment: detail.managerDepartment || "",
              totalMembers: detail.totalMembers || 0,
              networkMembers: detail.networkMembers || 0,
              networkShare: detail.networkShare || 0,
              members5G: detail.members5G || 0,
              broadbandMembers: detail.broadbandMembers || 0,
              terminal5GMembers: detail.terminal5GMembers || 0,
              isLowQuality: detail.isLowQuality || 0,
              lowQualityPlanDelivered: detail.planDelivered || 0
            };

            // 调试信息
            console.log("集团名称:", this.groupInfo.name);
            console.log("首字母:", this.getFirstChar(this.groupInfo.name));

            // 获取跟进记录
            this.getFollowRecords();

            // 获取信息化拓展项目
            this.getExpansionProducts();

            // 设置数据加载完成标志
            this.isLoaded = true;

            uni.hideLoading();

            // 使用延时确保DOM已经更新
            setTimeout(() => {
              this.initTabs();
            }, 200);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.data.msg || "获取集团详情失败",
              icon: "none"
            });
            setTimeout(() => {
              this.goBack();
            }, 1500);
          }
        })
        .catch(err => {
          console.error("获取集团详情失败", err);
          uni.hideLoading();
          uni.showToast({
            title: "网络请求失败，请稍后再试",
            icon: "none"
          });
          setTimeout(() => {
            this.goBack();
          }, 1500);
        });
    },

    // 初始化tabs组件
    initTabs() {
      try {
        if (this.$refs.uTabs) {
          // 手动触发tabs组件的更新
          this.$refs.uTabs.init();
          this.isTabsInit = true;
        }
      } catch (e) {
        console.error("初始化tabs组件失败", e);
      }
    },

    // 获取跟进记录
    getFollowRecords() {
      // 调用API获取跟进记录
      this.$http
        .sendRequest("zhanke/member_follow_list", "POST", {
          groupCode: this.groupCode,
          page: 1,
          limit: 10
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            const list = res.data.data.list || [];

            // 处理API返回的数据
            this.followRecords = list.map(item => ({
              deliveryTime: item.deliveryDate || "",
              policy: item.deliveryPolicy || "",
              isDelivered: 1 // 已经递送的记录
            }));
          } else {
            console.log("获取跟进记录失败，使用空数组");
            this.followRecords = [];
          }
        })
        .catch(err => {
          console.error("获取跟进记录失败", err);
          this.followRecords = [];
        });
    },

    // 获取信息化拓展项目
    getExpansionProducts() {
      // 调用API获取信息化拓展记录
      this.$http
        .sendRequest("zhanke/expansion_list", "POST", {
          groupCode: this.groupCode,
          page: 1,
          limit: 20
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            const list = res.data.data.list || [];

            // 处理API返回的数据
            this.expansionProducts = list.map(item => {
              // 获取跟进记录，如果有的话
              const followRecords = item.progressRecords || [];

              return {
                id: item.id,
                type: item.category || "其他",
                name: item.productName || "",
                count: item.quantity || 1,
                amount: item.estimatedAmount || 0,
                expectedTime: item.expectedLandingDate || "",
                status: item.status || "跟进中",
                manager: item.manager || "",
                expanded: false,
                followRecords: followRecords.map(record => ({
                  id: record.id,
                  date: record.createTime
                    ? record.createTime.split(" ")[0]
                    : "",
                  person: record.manager || "",
                  content: record.content || ""
                }))
              };
            });
          } else {
            console.log("获取信息化拓展项目失败，使用空数组");
            this.expansionProducts = [];
          }
        })
        .catch(err => {
          console.error("获取信息化拓展项目失败", err);
          this.expansionProducts = [];
        });
    },

    // 标签切换
    onTabChange(index) {
      // 确保index是数字
      if (typeof index === "object" && index.index !== undefined) {
        this.currentTab = Number(index.index);
      } else {
        this.currentTab = Number(index);
      }
    },

    // 滑动切换
    onSwiperChange(e) {
      this.currentTab = Number(e.detail.current);
    },

    // 编辑集团信息
    editGroup() {
      uni.showToast({
        title: "编辑功能开发中",
        icon: "none"
      });
    },

    // 添加跟进记录
    addFollowRecord() {
      uni.navigateTo({
        url: `/pages/business/follow/index?groupCode=${this.groupCode}`
      });
    },

    // 添加信息化拓展
    addExpansionItem() {
      uni.navigateTo({
        url: `/pages/business/expansion/edit?groupCode=${this.groupCode}`
      });
    },

    // 切换跟进记录的展开/收起状态
    toggleExpand(item) {
      this.$set(item, "expanded", !item.expanded);
    },

    // 添加信息化拓展跟进
    addFollowUp(item) {
      uni.navigateTo({
        url: `/pages/business/expansion/detail?groupCode=${this.groupCode}&expansionId=${item.id}`
      });
    },

    // 查看信息化拓展详情
    viewExpansionDetail(item) {
      uni.navigateTo({
        url: `/pages/business/expansion/detail?groupCode=${this.groupCode}&expansionId=${item.id}`
      });
    },

    // 获取行业样式类
    getIndustryClass(industry) {
      return getIndustryAvatarClass(industry);
    },

    // 获取行业徽章样式
    getBadgeClass(industry) {
      return getIndustryBadgeClass(industry);
    },

    // 获取份额样式类
    getShareClass(share) {
      return getNetworkShareClass(share);
    },

    // 获取产品类型样式
    getProductClass(type) {
      return getProductTypeClass(type);
    },

    // 获取状态样式
    getStatusClass(status) {
      return getStatusClass(status);
    },

    // 获取指定产品类型的数量
    getProductCountByType(type) {
      return this.expansionProducts.filter(item => item.type === type).length;
    },

    // 获取指定状态的产品数量
    getProductCountByStatus(status) {
      return this.expansionProducts.filter(item => item.status === status)
        .length;
    },

    // 获取预计总金额
    getTotalAmount() {
      return this.expansionProducts.reduce(
        (total, item) => total + (Number(item.amount) || 0),
        0
      );
    },

    // 设置产品筛选
    setProductFilter(type) {
      this.currentFilter = type;
    },

    // 按类型筛选产品
    filterProductsByType(type) {
      this.currentFilter = type;
    },

    // 获取最近递送方案时间
    getLatestDeliveryTime() {
      if (!this.followRecords || this.followRecords.length === 0) {
        return null;
      }

      // 按日期排序，取最新的
      const sortedRecords = [...this.followRecords].sort((a, b) => {
        return new Date(b.deliveryTime) - new Date(a.deliveryTime);
      });

      return sortedRecords[0].deliveryTime;
    },

    // 编辑基本信息
    editBasicInfo() {
      uni.navigateTo({
        url: `/pages/business/basic?groupCode=${this.groupCode}`
      });
    }
  }
};
</script>

<style>
.group-detail-container {
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 30px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 页面头部样式优化 */
.page-header {
  background: linear-gradient(135deg, #0078ff, #1546a3);
  padding: 50px 20px 16px;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.5px;
}

/* 高级卡片样式 */
.premium-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 120, 255, 0.12);
  border: 1px solid rgba(232, 234, 237, 0.95);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-card:active {
  transform: translateY(2px);
  box-shadow: 0 8px 20px rgba(0, 120, 255, 0.05);
}

.card-decorator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  /* background: linear-gradient(90deg, #0078ff, #00bcd4); */
}

/* 方形头像优化 */
.square-avatar {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.square-avatar:active {
  transform: scale(0.95);
}

/* 低质量数据高亮 */
.highlight {
  position: relative;
}

.highlight .data-value {
  color: #f56c6c;
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 108, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* 改进的方形份额样式 */
.square-share {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 卡片动画 */
.animate-card {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 集团信息卡片 */
.info-card {
  margin: 15px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
}

.group-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.group-avatar {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff !important;
  z-index: 2;
  position: relative;
}

.avatar-text {
  color: #ffffff !important;
  font-size: 24px;
  z-index: 3;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.group-info {
  flex: 1;
}

.group-name {
  font-size: 20px;
  font-weight: bold;
  color: #222222;
  margin-bottom: 8px;
}

.group-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.group-id {
  font-size: 12px;
  color: #606266;
  margin-right: 10px;
}

.group-district {
  font-size: 12px;
  color: #444444;
  margin-right: 10px;
}

.group-industry {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #ffffff;
}

.badge-government {
  background-color: #19be6b;
}
.badge-education {
  background-color: #ff9900;
}
.badge-medical {
  background-color: #f56c6c;
}
.badge-finance {
  background-color: #9c27b0;
}
.badge-transport {
  background-color: #3498db;
}
.badge-industry {
  background-color: #e67e22;
}
.badge-agriculture {
  background-color: #2ecc71;
}
.badge-innovation {
  background-color: #1abc9c;
}
.badge-fusion {
  background-color: #34495e;
}
.badge-legal {
  background-color: #8e44ad;
}
.badge-default {
  background-color: #909399;
}

.network-share-circle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-left: 15px;
}

.share-low {
  background: linear-gradient(135deg, #f56c6c, #e53935);
}
.share-medium {
  background: linear-gradient(135deg, #ff9900, #f57c00);
}
.share-high {
  background: linear-gradient(135deg, #19be6b, #0f9d58);
}
.share-default {
  background: linear-gradient(135deg, #909399, #606266);
}

.share-number {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.share-label {
  font-size: 10px;
  opacity: 0.9;
}

/* 集团基础数据 */
.group-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
}

.data-item {
  flex: 1;
  text-align: center;
}

.data-value {
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  display: block;
  margin-bottom: 6px;
}

.data-label {
  font-size: 12px;
  color: #606266;
}

.data-divider {
  width: 1px;
  height: 30px;
  background-color: #ebeef5;
}

/* 客户经理信息 */
.manager-info {
  display: flex;
  align-items: center;
}

.manager-avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.manager-details {
  flex: 1;
}

.manager-name {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 4px;
}

.manager-contact {
  display: flex;
  align-items: center;
}

.manager-phone {
  font-size: 12px;
  color: #606266;
  margin-left: 4px;
}

/* 标签页样式 */
.tab-container {
  margin: 15px 15px 5px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.swiper-container {
  height: calc(100vh - 370px);
  margin: 0 15px 15px;
}

.tab-scroll-view {
  height: 100%;
}

.tab-content {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  min-height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* 区块标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.section-title text {
  margin-left: 6px;
}

/* 产品类型统计卡片 */
.product-category-stats {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
  margin-bottom: 15px;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 5px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f5f5f5;
}

.product-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.bg-blue {
  background-color: #2196f3;
}

.bg-green {
  background-color: #4caf50;
}

.bg-orange {
  background-color: #ff9800;
}

.bg-purple {
  background-color: #9c27b0;
}

.bg-gray {
  background-color: #9e9e9e;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.product-count {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 筛选标签 */
.filter-section {
  margin-top: 5px;
  margin-bottom: 0;
}

.filter-scroll {
  white-space: nowrap;
}

.filter-tabs {
  display: flex;
  padding: 5px 0;
}

.filter-tab {
  padding: 6px 16px;
  margin-right: 12px;
  font-size: 14px;
  color: #606266;
  background-color: #f0f2f5;
  border-radius: 16px;
  transition: all 0.3s;
}

.filter-tab.active {
  background-color: #007aff;
  color: #ffffff;
  font-weight: bold;
}

/* 跟进记录时间线 */
.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: #e4e7ed;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #007aff;
  z-index: 1;
}

.timeline-content {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.timeline-date {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
}

.timeline-body {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

/* 信息化拓展卡片 */
.expansion-list {
  margin-top: 10px;
}

.expansion-card {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  /* border-left: 3px solid #007aff; */
}

.expansion-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.expansion-type {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 10px;
  color: #ffffff;
}

.type-line {
  background: linear-gradient(135deg, #0078ff, #1546a3);
  box-shadow: 0 3px 5px rgba(0, 120, 255, 0.2);
}
.type-cloud {
  background: linear-gradient(135deg, #00c853, #009624);
  box-shadow: 0 3px 5px rgba(0, 200, 83, 0.2);
}
.type-iot {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  box-shadow: 0 3px 5px rgba(255, 152, 0, 0.2);
}
.type-sms {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  box-shadow: 0 3px 5px rgba(156, 39, 176, 0.2);
}
.type-other {
  background: linear-gradient(135deg, #607d8b, #455a64);
  box-shadow: 0 3px 5px rgba(96, 125, 139, 0.2);
}

.expansion-name {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  flex: 1;
}

.expansion-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.status-following {
  background-color: rgba(0, 120, 255, 0.1);
  color: #0078ff;
  font-weight: 500;
  border: 1px solid rgba(0, 120, 255, 0.2);
}
.status-done {
  background-color: rgba(0, 200, 83, 0.1);
  color: #00c853;
  font-weight: 500;
  border: 1px solid rgba(0, 200, 83, 0.2);
}
.status-discard {
  background-color: rgba(244, 67, 54, 0.1);
  color: #f44336;
  font-weight: 500;
  border: 1px solid rgba(244, 67, 54, 0.2);
}

.expansion-info {
  margin-bottom: 15px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
}

.info-item {
  flex: 1;
}

.info-label {
  font-size: 12px;
  color: #909399;
  display: block;
  margin-bottom: 3px;
}

.info-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.expansion-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.expansion-actions button {
  margin-left: 10px;
  position: relative;
  overflow: hidden;
}

/* 空状态提示 */
.empty-content {
  padding: 30px 0;
  background: rgba(248, 249, 252, 0.5);
  border-radius: 10px;
}

/* 跟进记录部分样式 */
.follow-records-section {
  margin-top: 10px;
  border-top: 1px dashed #e6e8eb;
  padding-top: 10px;
}

.follow-records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  color: #606266;
  cursor: pointer;
}

.follow-records-title {
  font-size: 14px;
  font-weight: 500;
  color: #0078ff;
}

.follow-records-content {
  margin-top: 5px;
  padding: 8px;
  background-color: #f9fafc;
  border-radius: 8px;
}

/* 升级小时间线 */
.mini-timeline {
  padding-left: 15px;
}

.mini-timeline::before {
  left: 3px;
  width: 1px;
  background: linear-gradient(to bottom, #0078ff, rgba(0, 120, 255, 0.1));
}

.mini-timeline .timeline-dot {
  width: 8px;
  height: 8px;
  left: -15px;
  border-width: 1px;
}

.mini-timeline .timeline-content {
  padding: 8px 10px;
  margin-bottom: 10px;
}

.mini-timeline .timeline-header {
  margin-bottom: 3px;
}

.mini-timeline .timeline-date {
  font-size: 12px;
  color: #606266;
}

.mini-timeline .timeline-person {
  font-size: 12px;
  color: #0078ff;
  margin-left: 8px;
  font-weight: 500;
}

.mini-timeline .timeline-body {
  font-size: 13px;
  line-height: 1.5;
}

/* 完整的基础信息部分 */
.full-info-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f2f5;
}

.section-title-bar {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  position: relative;
  padding-left: 12px;
  background: linear-gradient(90deg, #333333, #0078ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  height: 16px;
  width: 4px;
  background: linear-gradient(to bottom, #0078ff, #00c6ff);
  border-radius: 2px;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  background-color: #f9fafc;
  border-radius: 10px;
}

.info-grid-item {
  width: 50%;
  padding: 10px;
  transition: all 0.2s ease;
}

.info-grid-item:hover {
  background-color: rgba(0, 120, 255, 0.05);
  border-radius: 8px;
}

.wide-grid-item {
  width: 100%;
}

.info-grid-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
  display: block;
}

.info-grid-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.avatar-government {
  background: linear-gradient(135deg, #0abd5a, #07964d);
}
.avatar-education {
  background: linear-gradient(135deg, #ff9500, #f57c00);
}
.avatar-medical {
  background: linear-gradient(135deg, #f55c5c, #e53935);
}
.avatar-finance {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}
.avatar-transport {
  background: linear-gradient(135deg, #3498db, #2980b9);
}
.avatar-industry {
  background: linear-gradient(135deg, #e67e22, #d35400);
}
.avatar-agriculture {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.avatar-innovation {
  background: linear-gradient(135deg, #1abc9c, #16a085);
}
.avatar-fusion {
  background: linear-gradient(135deg, #34495e, #2c3e50);
}
.avatar-legal {
  background: linear-gradient(135deg, #8e44ad, #6c3483);
}
.avatar-default {
  background: linear-gradient(135deg, #607d8b, #455a64);
}

.section-action {
  display: flex;
  align-items: center;
}

.edit-icon-wrapper {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 